<template>
    <div>
        <div style="margin:20px 0">
            <el-button type="primary" @click="handleAdd">添加学校</el-button>
        </div>
        <el-table :data="schools" style="width: 100%;height:500px">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="schoolname" label="学校名称" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row._id)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row._id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />

        <!--添加或编辑学校弹窗  -->
        <el-dialog v-model="schoolFormVisible" title="添加/编辑学校" width="500px">
            <el-form :model="school" ref="schoolFormRef" label-width="100px" label-position="right"
                style="width: 400px;" :rules="rules">
                <el-form-item label="学校名称" prop="schoolname">
                    <!-- @vue-ignore -->
                    <el-input v-model="school.schoolname" aria-placeholder="请输入学校名称" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="school._id == null ? addData(schoolFormRef) : updateData(schoolFormRef)">确认</el-button>
                    <el-button type="primary" @click="schoolFormVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted, reactive, nextTick } from 'vue';
import type { schoolInfoData } from '@/api/school/type';
//引入用户小仓库
import useSchoolStroe from '@/store/modules/school';
import type { FormInstance, FormRules } from 'element-plus';
let schoolStore = useSchoolStroe()
const schools = ref<schoolInfoData[]>([])
//当前页码
const currentPage = ref(1)
//每页显示多少条数据
const pageSize = ref(5)
//总数据条数
const total = ref(0)

const handleSizeChange = (val: number) => {
    pageSize.value = val
    getSchoolList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getSchoolList()
}

//打开添加学校弹窗
const handleAdd = () => {
    schoolFormVisible.value = true;
    school.value = {
        _id: null,
        schoolname: ''
    }
    nextTick(() => {
        schoolFormRef.value.resetFields()
    })
}

//添加学校弹窗会否展示
const schoolFormVisible = ref(false)

//添加学校数据收集对象
const school = ref<schoolInfoData | undefined>({
    _id: null,
    schoolname: ''
})


//表单ref对象
const schoolFormRef = ref()
//表单校验规则
const rules = reactive<FormRules>({
    schoolname: [{ required: true, message: "请输入学校名称", trigger: "blur" }]
})
//获取学校列表
const getSchoolList = () => {
    schoolStore.getSchoolList({
        page: currentPage.value, size: pageSize.value
    }).then((response) => {
        schools.value = schoolStore.schools
        total.value = response?.total as number         
    })
}


//添加学校
const addData = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            schoolStore.addSchool((school.value as schoolInfoData)).then(() => {
                schoolFormVisible.value = false
                getSchoolList()
            })
        } else {

        }
    })
}

//更新学校
const updateData = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            schoolStore.updateSchool((school.value as schoolInfoData)).then(() => {
                schoolFormVisible.value = false
                getSchoolList()
            })
        } else {

        }
    })
}

//编辑
const handleEdit = (_id: string) => {
    handleAdd()
    schoolStore.getSchoolById(_id).then(response => {
        school.value = response
    })
}
//删除
const handleDelete = (_id: string) => {
    ElMessageBox.confirm(
        "确定要删除这条数据吗？",
        'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            schoolStore.deleteSchool(_id).then(() => {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                getSchoolList()
            });
        })
        .catch(() => {})
}


onMounted(() => {
    getSchoolList()
})



</script>
<style scoped></style>